<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>未知宽高元素水平垂直居中</title>
</head>
<style>

  .parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: gainsboro;
  }
  .parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
    border: 1px solid red;
  }

  .parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: black;
  }
  .parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
  }

  .parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    height:300px;
    width: 300px;
    background: red;
  }
  .parent4 .child{
    color: #fff;
  }

  .div1{
    margin:30px 0 0 30px;
    width:100px;
    height:100px;
    background: forestgreen;
    transition:all 2s;
  }
  .div1:hover{
    width:300px;
  }
  :target{
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
  }
  .ul1{
    border: 1px solid red;
  }

  .ul1 li {
    height: 20px;
    border: 1px solid black;
  }

</style>
<body>
<a href="#contact">联系我</a>
<div class="div1"></div>
<div class="parent1">
  <!--table元素-->
  <div class="child">hello world-1</div>
</div>

<div class="parent3">
  <!--2d 平移变换-->
  <div class="child">hello world-3</div>
</div>

<div class="parent4">
  <!--2d 平移变换-->
  <div class="child">hello world-3</div>
</div>
<ul class="ul1">
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>
  <li class="four">4</li>
</ul>
</body>
<script>
  var ul1 = document.querySelector('.ul1')
  ul1.addEventListener('click',function (e) {
    console.log(this)
  })
//  ul1.onclick = function (e) {
//    console.log(e)
//  }
</script>
</html>